<template>
  <div class="item">
    <UserInfo :key="item.id" :item="item" />
    <div class="item__footer">
      <div>
        <span>0</span>
        <span>待完成任务</span>
      </div>
      <div>
        <span>16</span>
        <span>进行中任务</span>
      </div>
      <div>
        <span>6</span>
        <span>已审查任务</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import UserInfo from '@/components/userInfo/index.vue';
import { IUserInfo } from '@/types/user';

defineProps<{ item: IUserInfo }>()

</script>

<style lang="scss" scoped>
.item {
  background-color: white;
  border-radius: 10px;
  padding: 0px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px 0;

  :deep(.userInfo) {
    width: 100%;
  }

  .item__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;


    >div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
      gap: 6px;

      >span {

        &:nth-of-type(1) {
          font-size: 25px;

        }

        &:nth-of-type(2) {
          font-size: 14px;
          text-align: center;
          color: #91929E;
        }
      }
    }
  }
}
</style>